<style lang="less">
@import "./specialtyInfoDetail.less";
.tabs-tabpane-border{
  border-left: 1px solid #dddee1;
  border-right: 1px solid #dddee1;
}
</style>
<template>
    <div class="search" style="background-color:white" id="pop">
        <template>
          <Form ref="goodsDetailForm" :model="goodsDetailForm" :label-width="110" :rules="goodsDetailFormValidate" >
             <Tabs type="card">
                <TabPane label="特产信息" class="tabs-tabpane-border">
                  <div style="overflow:hidden;">
                    <div style="width: 500px;float:left">
                      <Form-item label="特产名称:" prop="goodsName" style="padding-top:16px;">
                        <Input type="text" v-model="goodsDetailForm.goodsName" clearable placeholder="请输入特产名称" style="width: 300px"/>
                      </Form-item>
                      <Form-item label="特产编号:" prop="goodsSn">
                        <Input type="text" v-model="goodsDetailForm.goodsSn" clearable placeholder="请输入特产编号" style="width: 300px"/>
                      </Form-item>
                      <Form-item label="所属分类:" prop="catId">
                        <Select v-model="goodsDetailForm.catId" placeholder="请选择" style="width: 200px">
                          <Option value="0">食品类</Option>
                          <Option value="1">酒水类</Option>
                        </Select>
                      </Form-item>
                      <Form-item label="所属类型:" prop="goodsType">
                        <Select v-model="goodsDetailForm.goodsType" placeholder="请选择" style="width: 200px">
                          <Option value="0">大米</Option>
                          <Option value="1">面条</Option>
                        </Select>
                      </Form-item>
                      <Form-item label="所属商户:" prop="supplierId">
                        <!-- <Button icon="android-apps">选择</Button> -->
                        <div>
                          <div style="float:left;margin-right:12px;"><Button icon="android-apps" @click="popSupplierSearchMoadl">选择</Button></div>
                          <div style="display:inline-flex;min-width:80px;">
                            <Tag color="blue" type="dot" :fade="false" style="border-color:#2d8cf0 !important" v-model="goodsDetailForm.supplierId" v-if="currSelectedSupplier">{{currSelectedSupplier.supplierName}}</Tag>
                          </div>
                        </div>
                      </Form-item>
                      <Form-item label="品牌名称:" prop="brandId">
                        <Button icon="android-apps">选择</Button>
                      </Form-item>
                      <Form-item label="市场售价:" prop="marketPrice">
                        <Input type="text" v-model="goodsDetailForm.marketPrice" clearable style="width: 200px"/>
                      </Form-item>
                      <Form-item label="平台售价:" prop="shopPrice">
                        <Input type="text" v-model="goodsDetailForm.shopPrice" clearable style="width: 200px"/>
                      </Form-item>
                      <Form-item label="促销价格:" prop="promotePrice">
                        <Input type="text" v-model="goodsDetailForm.promotePrice" clearable style="width: 200px"/>
                      </Form-item>
                      <Form-item label="促销开始时间:" prop="promoteStartDate">
                        <DatePicker type="datetime" v-model="goodsDetailForm.promoteStartDate" format="yyyy-MM-dd HH:mm:ss" style="width: 200px" @on-change="goodsDetailForm.promoteStartDate=$event" ></DatePicker>
                      </Form-item>
                      <Form-item label="促销结束时间:" prop="promoteEndDate">
                        <DatePicker type="datetime" v-model="goodsDetailForm.promoteEndDate" format="yyyy-MM-dd HH:mm:ss" style="width: 200px" @on-change="goodsDetailForm.promoteEndDate=$event" ></DatePicker>
                      </Form-item>
                    </div>

                    <div style="width: 500px;float:left">
                      <Form-item label="可使用积分:" prop="integral" style="padding-top:16px;">
                        <Input type="text" v-model="goodsDetailForm.integral" clearable style="width: 200px"/>
                      </Form-item>
                      <Form-item label="积分赠送:" prop="giveIntegral">
                        <Input type="text" v-model="goodsDetailForm.giveIntegral" clearable style="width: 200px"/>
                      </Form-item>
                      <Form-item label="红包类型:" prop="bonusTypeId">
                        <Button icon="android-apps">选择</Button>
                      </Form-item>
                      <FormItem label="是否开放销售" prop="isOnSale">
                      <RadioGroup v-model="goodsDetailForm.isOnSale">
                        <Radio :label="1">是</Radio>
                        <Radio :label="0">否</Radio>
                      </RadioGroup>
                     </FormItem>
                     <FormItem label="是否单独销售" prop="isAloneSale">
                      <RadioGroup v-model="goodsDetailForm.isAloneSale">
                        <Radio :label="1">是</Radio>
                        <Radio :label="0">否</Radio>
                      </RadioGroup>
                     </FormItem>
                     <FormItem label="是否开放销售" prop="isBest">
                      <RadioGroup v-model="goodsDetailForm.isBest">
                        <Radio :label="1">是</Radio>
                        <Radio :label="0">否</Radio>
                      </RadioGroup>
                     </FormItem>
                     <FormItem label="是否是新品" prop="isNew">
                      <RadioGroup v-model="goodsDetailForm.isNew">
                        <Radio :label="1">是</Radio>
                        <Radio :label="0">否</Radio>
                      </RadioGroup>
                     </FormItem>
                     <FormItem label="是否热销" prop="isHot">
                      <RadioGroup v-model="goodsDetailForm.isHot">
                        <Radio :label="1">是</Radio>
                        <Radio :label="0">否</Radio>
                      </RadioGroup>
                     </FormItem>
                     <FormItem label="是否特价促销" prop="isPromote">
                      <RadioGroup v-model="goodsDetailForm.isPromote">
                        <Radio :label="1">是</Radio>
                        <Radio :label="0">否</Radio>
                      </RadioGroup>
                     </FormItem>
                    </div>

                    <div style="width: 500px;float:left">
                      <Form-item label="库存数量:" prop="goodsNumber" style="padding-top:16px;">
                        <Input type="text" v-model="goodsDetailForm.goodsNumber" clearable style="width: 200px"/>
                      </Form-item>
                      <Form-item label="单件商品重量:" prop="goodsWeight">
                        <Input type="text" v-model="goodsDetailForm.goodsWeight" clearable style="width: 200px"/>
                      </Form-item>
                      <Form-item label="商品报警数量:" prop="warnNumber">
                        <Input type="text" v-model="goodsDetailForm.warnNumber" clearable style="width: 200px"/>
                      </Form-item>
                      <Form-item label="商品简短简述:" prop="goodsBrief">
                        <Input v-model="goodsDetailForm.goodsBrief" clearable style="width: 400px"/>
                      </Form-item>
                      <Form-item label="商品详细描述:" prop="goodsDesc">
                        <textarea v-model="goodsDetailForm.goodsDesc" style="width:400px;height:120px;resize:none;line-height:2.0;border:1px solid #dddee1;"/>
                      </Form-item>
                      <Form-item label="封面图片:">
                        <image-component
                          ref="hotelLitpicComp"
                          @on-remove-success="hotelLitpicRemoveSuccess"
                          @on-add-success="hotelLitpicAddSuccess">
                        </image-component>
                      </Form-item>
                      <Form-item label="列表图片:">
                        <image-component
                          ref="hotelPiclistComp"
                          @on-remove-success="hotelPiclistRemoveSuccess"
                          @on-add-success="hotelPiclistAddSuccess">
                        </image-component>
                      </Form-item>
                    </div>
                 </div>
                </TabPane>

                <!-- <TabPane label="图片">
                  <template>
                    <div>
                      <div style="padding-top:20px;padding-left:20px;">封面图片</div>
                      <image-component
                          ref="hotelLitpicComp"
                          @on-remove-success="hotelLitpicRemoveSuccess"
                          @on-add-success="hotelLitpicAddSuccess">
                        </image-component>

                      <hr style="border-bottom:1px solid #dddee1; height:1px;">

                      <div style="padding-top:20px;padding-left:20px;">详情列表图片</div>
                      <image-component
                          ref="hotelPiclistComp"
                          @on-remove-success="hotelPiclistRemoveSuccess"
                          @on-add-success="hotelPiclistAddSuccess">
                        </image-component>
                    </div>

                  </template>
                </TabPane> -->
                <!-- <TabPane label="注意事项" class="tabs-tabpane-border">
                  <template>
                    <Form-item label="注意事项" prop="feeInclude" style="padding-top:16px;">
                      <textarea type="text" v-model="goodsDetailForm.feeInclude" clearable placeholder="请输入注意事项" style="width:600px;height:200px;resize:none;line-height:2.0"/>
                    </Form-item>
                  </template>
                </TabPane> -->
            </Tabs>

            <hr style="border-bottom:1px solid #dddee1; height:1px;">
          </Form>

          <div style="padding:16px 0px;margin-left:2px;" class="operation">
            <Button @click="cancelSubmitGoods" icon="android-arrow-back" style="width:120px;margin-right:10px;">返回主页</Button>
            <!-- <Button :loading="submitLoading" @click="submitHotel" type="primary" :icon="hotelButtonTypeIcon" style="width:120px;">{{hotelButtonTypeText}}</Button> -->
            <Button :loading="submitLoading" @click="submitGoods" type="primary" :icon="goodsButtonTypeIcon" style="width:120px;">{{goodsButtonTypeText}}</Button>

          </div>

          <supplier-search-comp ref="goodsSupplierSearchModal" @on-selected='selectedSupplier'></supplier-search-comp>

      </template>
    </div>
</template>

<script>

import dateFormatUtil from "@/utils/dateFormatUtil";
import tinymce from 'tinymce';
import SupplierSearchComp from "../comm-comp/supplierSearchComp.vue";
import ImageComponent from "./../comm-comp/imageComponent.vue";

export default {
  name: "specialty-detail",
  components: {
    SupplierSearchComp,
    ImageComponent
  },
  data() {
    const validateMobile = (rule, value, callback) => {
      var reg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!reg.test(value)) {
        callback(new Error("手机号格式错误"));
      } else {
        callback();
      }
    };
    const validategoodsNameNoBlank = (rule, value, callback) => {
      var validObj = rule.validObj;
      var reg = new RegExp(validObj.regexp);
      if (reg.test(value)) {
        callback(new Error(validObj.msg));
      } else {
        callback();
      }
    };
    return {
      loading: true,
      goodsDetailForm: {
        goodsName: "",
        goodsSn: "",
        catId:"",
        goodsType: "",
        supplierId: "",
        brandId: "",
        marketPrice: "",
        shopPrice: "",
        promotePrice: "",
        promoteStartDate: "",
        promoteEndDate: "",
        integral: "",
        giveIntegral: "",
        bonusTypeId: "",
        isOnSale: "",
        isAloneSale: "",
        isBest: "",
        isNew: "",
        isHot: "",
        isPromote: "",
        goodsNumber: "",
        goodsWeight: "",
        warnNumber: "",
        goodsBrief: "",
        goodsDesc: "",
        goodsThumb: "",
        goodsImg: ""
      },
      goodsDetailModalType: 0,
      goodsButtonTypeText: "添加",
      goodsButtonTypeIcon: "plus-round",

      goodsDetailFormValidate: {
        goodsName: [
          { required: true, message: "特产名称不能为空", trigger: "blur" },
          { max: 64, message: '特产名称太长'},
          // { validator: 'regexp', pattern: /\s+/g, message: '特产名称不允许包含空格',trigger: "change,blur"}
          { validator: validategoodsNameNoBlank, validObj:{regexp:/\s+/g,msg:"特产名称不允许包含空格"} ,trigger: "blur"}
        ],
        goodsSn: [
          { required: true, message: "特产编号不能为空", trigger: "blur" },
          { max: 64, message: '特产编号太长'}
        ]
        ,
        supplierId:[
           { required: true, message: "供应商不能为空", trigger: "blur" },
        ]
      },
      submitLoading: false,
      currSelectedSupplier:"" //选择供应商组件 返回供应商对象

    };
  },
  methods: {
    init() {

      this.getgoodsList();
    },

    resetFormByType: function(type,updateGoods){
      console.log(updateGoods);
      this.currSelectedSupplier = "";
      if(0 === type){
        this.goodsDetailModalType = 0;
        this.goodsButtonTypeText = "添加";
        this.goodsButtonTypeIcon = "plus-round";
        for (let attr in this.goodsDetailForm) {
            this.goodsDetailForm[attr] = "";
        }

        this.$refs.hotelLitpicComp.initByType("goods",0,null);
        this.$refs.hotelPiclistComp.initByType("goods",0,null);
      }else if(1 === type){
        this.goodsDetailModalType = 1;
        this.goodsButtonTypeText = "编辑";
        this.goodsButtonTypeIcon = "edit";
        this.currSelectedSupplier = updateGoods.supplier;
        this.goodsDetailForm = updateGoods;

        this.$refs.hotelLitpicComp.initByType("goods",1,updateGoods.goodsThumb);
        this.$refs.hotelPiclistComp.initByType("goods",1,updateGoods.goodsImg);
      }else{}

      this.$refs.goodsDetailForm.resetFields();
      for (let attr in this.goodsDetailForm) {
        if (this.goodsDetailForm[attr] == null) {
          this.goodsDetailForm[attr] = "";
        }
      }
    },

    popSupplierSearchMoadl:function(){
      this.$refs.goodsSupplierSearchModal.openSupplierSearchModal(true);
    },
    selectedSupplier(res){
      console.log("========selectedSupplier============");
      console.log(res);
      this.currSelectedSupplier = res;
      this.goodsDetailForm.supplierId = res.id;
    },

    getgoodsList() {
      // this.loading = true;
      // this.getRequest("/goods/list", this.goodsDetailForm).then(res => {
      //   this.loading = false;
      //   if (res.success === true) {
      //     this.data = res.result.content;
      //     this.total = res.result.totalElements;
      //   }
      // });
    },

    submitGoods() {
      this.$refs.goodsDetailForm.validate(valid => {
        if (valid) {
          let url = "";
          if (this.goodsDetailModalType === 1) {
            // 编辑特产
            url = "/goods/update";
            this.submitLoading = true;
            console.log("============this.goodsDetailForm=============")
            console.log(this.goodsDetailForm);
            this.putRequest(url, this.goodsDetailForm).then(res => {
              this.submitLoading = false;
              if (res.success === true) {
                this.$Message.success("更新操作成功");
                this.$emit('on-goods-success',true);
                // this.init();
              }
            });
          }else{
            url = "/goods/create";
            this.submitLoading = true;
            var creategoods = this.goodsDetailForm;
            delete creategoods.id;
            if(creategoods.payPoints) delete creategoods.payPoints;
            if(creategoods.rankPoints) delete creategoods.rankPoints;
            this.postRequest(url, creategoods).then(res => {
              this.submitLoading = false;
              if (res.success === true) {
                this.$Message.success("操作成功");
                // this.init();
                this.$emit('on-goods-success',true);
              }
            });
          }

        }
      });
    },
    cancelSubmitGoods:function(){
      this.$emit('on-goods-cancel',true);
    }

    //picture methods start
    ,
    hotelLitpicRemoveSuccess:function(res){
      if(res.flag){
        this.goodsDetailForm.goodsThumb = res.pathStr;
      }
    },
    hotelLitpicAddSuccess:function(res){
      if(res.flag){
        this.goodsDetailForm.goodsThumb = res.pathStr;
      }
    },
    hotelPiclistRemoveSuccess:function(res){
      if(res.flag){
        this.goodsDetailForm.goodsImg = res.pathStr;
      }
    },
    hotelPiclistAddSuccess:function(res){
      if(res.flag){
        this.goodsDetailForm.goodsImg = res.pathStr;
      }
    }
     //picture methods end


  },
  mounted() {
    this.init();
  }
};
</script>
